<template>
	<div class="zh-classroom-visits2">
		<div class="zh-h5">
			<span>
				<router-link to="/home" tag="a">首页</router-link> >
				<router-link to="/affairs/inspection/classroom-visits" tag="a">课堂巡检</router-link>
				>
				<span>直播详情</span>
			</span>
		</div>
		<div class="tour-course">
			<div class="tour-course-menu">
				<ul>
					<li class="i_vp clear">
						<a @click="back">返回</a>
					</li>
					<li class="i_vp clear">
						<span>设备名称：</span>
						<span>{{liveData.deviceName}}</span>
					</li>
					<li class="i_vp clear">
						<span>校园分区：</span>
						<span>{{liveData.partition}}</span>
					</li>
					<li class="i_vp clear">
						<span>设备说明：</span>
						<span>{{liveData.deviceDes}}</span>
					</li>
					<li class="i_vp clear">
						<div>
							<span>设备状态：</span>
							<span>{{liveData.deviceStatus}}</span>
						</div>
						<div>
							<span>课程名称：</span>
							<span :title="liveData.coursename">{{liveData.coursename}}</span>
						</div>
						<div>
							<span>主讲人：</span>
							<span>{{liveData.userName}}</span>
						</div>
						<div>
							<span>直播时间：</span>
							<span>{{liveData.time}}</span>
						</div>
						<div>
							<span>课程地址：</span>
							<span style="word-wrap: break-word;word-break: break-all;">{{liveData.liveUrl}}</span>
						</div>
					</li>
				</ul>
			</div>

			<div class="course-video">
				<div class="course-mb">
					<div class="video-py"  id="newPlayDom">
				        <!-- <flvPlayer v-if="playerOption.url" id="flvPlayer1" :muteds="false" :playerOption.sync="playerOption"></flvPlayer> -->
                        <flvdplayer  v-if="playerOption.url" :id="`playerId${domId}`" :playerOption.sync="playerOption" ></flvdplayer>
                        <img v-else src="../../../assets/images/image_mingshi_bg3.png" alt="">
                    </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// import flvPlayer from '../../common/flvPlayer';
// import flvPlayer from '../../common/castFlv';
import flvdplayer from '@/components/common/flvdplayerX'
export default {
    components: {
        // flvPlayer
        flvdplayer
    },
    data() {
        return {
            player: null, // 播放器
            loading: {
                status: false
            },
            liveData: {
                deviceName: "",
                partition: "",
                deviceDes: "------",
                deviceStatus: "",
                coursename: "------",
                time: "",
                userName: "",
                liveUrl: "------"
            },
            playerOption:{
                type:'flv',
                url: '',
                status_stream:true,
                status_stream_audio:true
            },
            liveUrl: ""
        };
    },
    created() {
        this.getLiveInfo();
    },
    mounted(){
    },
    beforeDestroy() {
    },
    methods: {
        getLiveInfo() {
            this.loading.status = true;
            let success = data => {
                this.loading.status = false;
                if (!is_empty(data.data)) {
                    this.liveData.deviceName = data.data.recorder_name
                        ? data.data.recorder_name
                        : "-";
                    this.liveData.partition = data.data.class_name
                        ? data.data.class_name
                        : "-";
                    this.liveData.deviceDes = data.data.comment
                        ? data.data.comment
                        : "-";
                    this.liveData.deviceStatus =
                        data.data.recorder_status === 0 ? "空闲中" : "上课中";
                    this.liveData.coursename = data.data.coursename
                        ? data.data.coursename
                        : "-";
                    this.liveData.time =
                        (data.data.starttime ? data.data.starttime : "") +
                        "-" +
                        (data.data.endtime ? data.data.endtime : "");
                    this.liveData.userName = data.data.username
                        ? data.data.username
                        : "-";
                    this.liveData.liveUrl = data.data.recorder_status === 0 ? '' : this.BASE_URL + '/home/liveRoom?id=' + data.data.live_id
                    this.playerOption.url = data.data.play_url;
                    this.playerOption.status_stream=data.data.status_stream == '1'?true:false;
                    this.playerOption.status_stream_audio=data.data.status_stream_audio == '1' ?true:false;
                }
            };

            let fail = data => {
                this.loading.status = false;
                this.$message.error(data.msg);
            };

            //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            this.$ajax.get("api/recorder/get_live_info", {
                params: { id: this.$route.query.id },
                func: { success: success, fail: fail }
            });
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="scss">
@import url('../../../assets/css/video.css');
.zh-classroom-visits2 {
    .tour-course {
        background: #effaff;
        position: absolute;
        width: 100%;
        height: calc(100% - 61px);
        top: 61px;
        left: 0;
        font-size: 0;
        overflow: hidden;
        > div {
            text-align: left;
            text-align-last: initial;
            height: 100%;
            display: inline-block;
            vertical-align: top;
        }
    }


    .tour-course-menu {
        background: #dff3f9;
        width: 260px;
        overflow: hidden;

        .el-menu-item.is-active {
            color: #ffffff;
        }

        ul {
            height: 100%;

            .i_vp {
                position: relative;
                padding: 22px 10px 22px 25px;
                overflow-wrap: break-word;
                word-break: break-all;
                font-size: 12px;
                line-height: 20px;
                border-bottom: 1px solid #d1e5eb;
            }
            li:first-child {
                padding-left: 0;
                font-size: 14px;
                cursor: pointer;

                a {
                    display: inline-block;
                    padding-left: 45px;
                    width: 100%;
                    height: 100%;
                }
            }
            li:first-child:before {
                display: inline-block;
                content: " ";
                height: 10px;
                width: 10px;
                border-width: 0 0 2px 2px;
                border-color: #232323;
                border-style: solid;
                transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
                position: absolute;
                top: 50%;
                left: 29px;
                margin-top: -5px;
            }

            li:nth-child(5) {
                div {
                    margin: 20px 0;

                    span:first-child {
                        display: inline-block;
                        width: 60px;
                        text-align: right;
                    }
                }
            }
            // li:last-child {
            //     .textarea-this {
            //         margin: 0px 0px 20px 0px;
            //         position: relative;

            //         .numberWord {
            //             position: absolute;
            //             bottom: 10px;
            //             right: 10px;
            //         }
            //     }
            //     .buttonstyle {
            //         margin-bottom: 10px;
            //         h3 {
            //             font-size: 18px;
            //         }
            //         .dafen {
            //             font-size: 12px;
            //             height: 25px;
            //             float: right;
            //         }
            //     }
            //     .cut-img {
            //         padding: 0 0px 20px;
            //         display: flex;
            //         align-items: center;
            //         justify-content: space-around;
            //         .el-checkbox {
            //             margin-right: 5px;
            //         }
            //     }
            // }
        }
    }

    .course-video {
        width: calc(100% - 260px);
    }

    .course-mb {
        height: 90%;
        width: 100%;
        margin: 3% auto 0;
        position: relative;

        > i {
            font-size: 30px;
            cursor: pointer;
            position: absolute;
            top: 48%;
            &:nth-of-type(1) {
                left: 0;
            }
            &:nth-of-type(2) {
                right: 0;
            }
            &:hover {
                color: #409eff;
            }
        }
        > div {
            width: 95%;
            height: 100%;
            // text-align: justify;
            // text-align-last: justify;
            background: #ccc;
            margin: auto;
        }
    }


    .i_equipment {
        border-bottom: 1px solid #c4e2eb;
        font-size: 14px;
        > h2,
        > a {
            font-size: 14px;
            height: 54px;
            line-height: 54px;
            padding: 0 20px;
        }
        > a {
            > i {
                background: none;
                margin-right: 10px;
            }
        }
    }


}
</style>
